<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <div v-show="!modifyInfo.visible">
      <div class="filter-wrapper">
        <NewPageFilter
          v-model:query="filterInfo.query"
          :query-more-json="false"
          :filter-list="filterInfo.searchList"
          :filter-btn="filterInfo.searchBtn"
          :clear-type="filterInfo.clearType"
        >
        </NewPageFilter>
      </div>
      <div class="filter-wrapper">
        <NewPageFilter :filter-btn="filterInfo.btnList">
          <template v-slot:filter-upload>
            <el-upload
              :headers="uploadInfo.headers"
              :show-file-list="false"
              :data="uploadInfo.data"
              :on-error="uploadError"
              :on-success="importOrders"
              :before-upload="beforeUpload"
              :action="uploadInfo.action"
            >
              <el-button>excel导入</el-button>
            </el-upload>
          </template>
          <template v-slot:filter-remove>
            <el-button
              :disabled="tableInfo.selections.length === 0"
              @click="remove"
              >删除</el-button
            >
          </template>
          <template v-slot:filter-import>
            <el-button :plain="true" @click="downloadTemplate"
              >下载导入模板</el-button
            >
          </template>
        </NewPageFilter>
      </div>
      <!-- 表格 -->
      <table-container
        :refresh="tableInfo.refresh"
        :init-curpage="tableInfo.initCurpage"
        v-model:data="tableInfo.data"
        :api="tableInfo.api"
        :tab-index="true"
        :check-box="true"
        :query="filterInfo.query"
        :field-list="tableInfo.fieldList"
        :handle="tableInfo.handle"
        @handleEvent="handleEvent"
      >
        <template v-slot:col-userName="scope">
          <span
            v-if="$permission('comparDept:detail')"
            class="slip-edit"
            @click="showDetail(scope.row)"
            >{{ scope.row.userName }}</span
          >
          <span v-else>{{ scope.row.orderNo }}</span>
        </template>
      </table-container>
    </div>
    <Modify
      v-if="modifyInfo.visible"
      v-model:visible="modifyInfo.visible"
      :title="modifyInfo.title"
      @returnModify="getList"
    ></Modify>
  </div>
</template>

<script setup name="comparDept">
import Modify from './modify'
import { exportTemplateExcel } from '@/api/pub'
import { ElLoading } from 'element-plus'
import axios from 'axios'
import {
  getMappingTripartiteDeptPage,
  delMappingTripartiteDept,
} from '@/api/tripartite'
const { proxy } = getCurrentInstance()
// 过滤相关配置
const filterInfo = ref({
  clearType: true,
  query: {
    sort: 'create_time desc',
  },
  searchList: [
    {
      componentType: 'input',
      event: search,
      hidden: true,
      label: '系统部门编码',
      show: true,
      value: 'codeLike',
    },
    {
      componentType: 'input',
      event: search,
      hidden: true,
      label: '系统部门名称',
      show: true,
      value: 'nameLike',
    },
    {
      label: '对方系统',
      value: 'tsSystemCode',
      event: search,
      componentType: 'select-model',
      code: 'client_id',
      show: true,
      hidden: true,
    },
    {
      componentType: 'input',
      event: search,
      hidden: true,
      label: '对方编码',
      show: true,
      value: 'tsCodeLike',
    },
    {
      componentType: 'input',
      event: search,
      hidden: true,
      label: '对方名称',
      show: true,
      value: 'tsNameLike',
    },
  ],
  searchBtn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    {
      type: 'button',
      label: '新增',
      event: add,
      show: proxy.$permission('comparDept:add'),
    },
    {
      value: 'remove',
      type: 'slot',
      show: proxy.$permission('comparDept:del'),
    },
    // {
    //   type: 'slot',
    //   value: 'import',
    //   show: proxy.$permission('comparDept:import'),
    // },
    // {
    //   type: 'slot',
    //   value: 'upload',
    //   show: proxy.$permission('comparDept:upload'),
    // },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: undefined,
  selections: [],
  data: [],
  fieldList: [
    { label: '系统部门编码', value: 'code' },
    { label: '系统部门名称', value: 'name' },
    { label: '系统上级部门', value: 'parentName' },
    { label: '对方系统', value: 'tsSystemCode' },
    { label: '对方编码', value: 'tsCode' },
    { label: '对方名称', value: 'tsName' },
    { label: '对方上级部门', value: 'tsUpName' },
    { label: '创建人', value: 'createUserName' },
    { label: '创建时间', value: 'createTime' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '50',
    btList: [
      {
        label: '删除',
        event: remove,
        popconfirmText: '删除后将改变数据,是否继续？',
        show: proxy.$permission('comparDept:del'),
      },
    ],
  },
})
const modifyInfo = ref({
  visible: false,
  title: '',
})
const detailInfo = ref({
  visible: false,
  orderId: '',
})
const uploadInfo = ref({
  action:
    axios.defaults.baseURL + '/tripartite/tripartiteSystemDept/import/excel',
  headers: {
    Authorization: proxy.$store.state.user.token,
  },
  loading: {},
  data: {
    supplierId: '',
  },
})

getList()
function downloadTemplate() {
  exportTemplateExcel('mapping_dept_import').then((res) => {
    if (res) {
      proxy.$fn.parseExcel(res)
    }
  })
}
// 获取列表
function getList() {
  tableInfo.value.api = getMappingTripartiteDeptPage
  tableInfo.value.refresh = Math.random()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.api = getMappingTripartiteDeptPage
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function clearSearch() {
  filterInfo.value.clearType = !filterInfo.value.clearType
  filterInfo.value.query = { sort: 'create_time desc' }
  search()
}
// 创建
function add() {
  modifyInfo.value.visible = true
  modifyInfo.value.title = '新增部门信息对照'
}
function showDetail(row) {
  detailInfo.value.visible = true
  detailInfo.value.orderId = row.id
}
function remove(row) {
  if (row && row.id) {
    let ids = [row.id]
    reRemove(ids)
  } else {
    let ids = tableInfo.value.selections.map((item) => item.id)
    proxy
      .$confirm('删除后将改变数据,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        reRemove(ids)
      })
  }
}
function reRemove(ids) {
  delMappingTripartiteDept(ids).then((res) => {
    if (res && res.success) {
      getList()
    }
  })
}
// 触发事件
function handleEvent(event, data) {
  switch (event) {
    case 'tableCheck':
      tableInfo.value.selections = data
      break
  }
}
function importOrders(resp) {
  //导入
  uploadInfo.value.loading.close()
  if (resp && resp.success) {
    proxy.$message.success({
      duration: 3500,
      showClose: true,
      message: resp.msg,
    })
    getList()
  } else {
    proxy.$message.error({
      message: resp.msg,
      duration: 3000,
      showClose: true,
    })
  }
}
function uploadError(err) {
  if (err) {
    proxy.$message.error({
      message: '系统错误',
      duration: 3000,
      showClose: true,
    })
  }
  uploadInfo.value.loading.close()
}
function beforeUpload() {
  //导入
  //发生请求时打开加载动画
  uploadInfo.value.loading = ElLoading.service({
    fullscreen: true,
    background: 'rgba(255,255,255,.4)',
  })
  return true
}
</script>

<style scoped></style>
